<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout::common_head(~{::title}, ~{::supplement})">
    <meta charset="UTF-8">
    <title>日历图</title>
    <script src="../static/js/jquery-3.2.1.min.js" th:src="@{js/jquery-3.2.1.min.js}"></script>
    <script src="../static/js/semantic.js" th:src="@{js/semantic.js}"></script>
    <link rel="stylesheet" href="../static/css/semantic.css" th:href="@{/css/semantic.css}"/>
    <link rel="stylesheet" href="../static/css/icon.css" th:href="@{css/icon.css}"/>
    <link href="../static/css/ionicons.min.css" rel="stylesheet" th:href="@{css/ionicons.min.css}"/>
    <link href="../static/css/main.css" rel="stylesheet" th:href="@{css/main.css}"/>
    <link href="../static/css/pace.css" rel="stylesheet" th:href="@{css/pace.css}"/>
    <link href="../static/css/lobibox.css" rel="stylesheet" th:href="@{css/lobibox.css}"/>

    <th:block th:fragment="supplement">
        <script src="../static/js/echarts.min.js" th:src="@{js/echarts.min.js}"></script>
        <script src="../static/js/notifications.js" th:src="@{js/notifications.js}"></script>
        <!--<script src="http://rapapi.org/rap.plugin.js?projectId=19544&mode=0"></script>-->
        <script src="../static/js/jstree.min.js" th:src="@{js/jstree.min.js}"></script>
        <script src="../static/js/ion.rangeSlider.js" th:src="@{js/ion.rangeSlider.js}"></script>
        <link rel="stylesheet" href="../static/css/jstree-default/style.min.css"
              th:href="@{css/jstree-default/style.min.css}">
        <link rel="stylesheet" href="../static/css/ion.rangeSlider.css"
              th:href="@{css/ion.rangeSlider.css}">
        <link rel="stylesheet" href="../static/css/ion.rangeSlider.skinNice.css"
              th:href="@{css/ion.rangeSlider.skinNice.css}">

        <style type="text/css">
            /*原生button 有个下外边距*/
            .ui.modal .actions > .button {
                margin-bottom: 0;
            }
            .chartBar {
                height: 300px;
            }
            .ui.segment.block_row2{
                min-height: 300px;
            }
            #pop_num_filter {
                width: 150px;
            }
            /*问题详情modle固定高度*/
            .ui.segment.detailconfirm{
                height: 232px;overflow-y:auto;overflow-x:hidden
            }
            .ui.segment.detailalarmed{
                min-height: 130px;
            }
            #alertMenu{
                height: 137px;overflow-y:auto;overflow-x:hidden
            }
            #alertmessage{
                height: 40px;overflow-y:auto;overflow-x:hidden
            }

            /*原生label 有个下外边距*/
            .ui .label {
                margin-bottom: 0;
            }
        </style>
    </th:block>
</head>
<body>
<!--header start-->
<div id="contextWrap">
    <!--sidebar-->
    <div class="ui sidebar vertical left menu overlay  borderless visible sidemenu inverted  grey" data-color="grey"
         th:replace="layout::left_menu">
        <a class="item logo" href="index.html">
            <img src="../static/images/logo.png" alt="stagblogo"/><img src="../static/images/thumblogo.png"
                                                                       alt="stagblogo" class="displaynone"/>
        </a>
        <div class="ui accordion inverted">
            <div class="title item">
                <i class="ion-speedometer titleIcon icon"></i>仪表盘
            </div>
            <div class="content">
                <a class="item" href="#" th:href="@{/dashboard}">仪表盘</a>
            </div>
            <div class="title item" href="#">
                <i class="ion-ios-world titleIcon  icon"></i>业务概览
            </div>
            <div class="content">
            </div>
            <div class="title item">
                <i class="ion-mouse titleIcon icon"></i>设备监控<i class="dropdown icon"></i>
            </div>
            <div class="content">
                <a class="item" href="#" th:href="@{/overview}">设备总览</a>
                <a class="item" href="#">设备详情</a>
            </div>
            <div class="title item" href="#">
                <i class="ion-arrow-graph-up-right titleIcon icon"></i>视图展示
            </div>
            <div class="content">
            </div>
            <div class="title item">
                <i class="ion-paintbrush titleIcon icon"></i>告警展示<i class="dropdown icon"></i>
            </div>
            <div class="content">
                <a class="item" href="#">告警日历</a>
                <a class="item" href="#">告警列表</a>
            </div>
            <div class="title item" href="#">
                <i class="ion-briefcase titleIcon icon"></i>报表统计
            </div>
            <div class="content">
            </div>
        </div>

        <div class="ui dropdown item displaynone scrolling">
            <span>仪表盘1</span>
            <i class="ion-speedometer icon"></i>
            <div class="menu">
                <div class="header">
                    仪表盘1
                </div>
            </div>
        </div>

        <div class="ui dropdown item displaynone scrolling">
            <span>业务概览</span>
            <i class="ion-ios-world icon"></i>
            <div class="menu">
                <div class="header">
                    业务概览
                </div>
            </div>
        </div>

        <div class="ui dropdown item displaynone scrolling">
            <span>设备监控</span>
            <i class="ion-mouse icon"></i>
            <div class="menu">
                <div class="header">
                    设备监控
                </div>
                <div class="ui divider"></div>
                <a class="item" href="tab.html">设备总览</a>
                <a class="item" href="table.html">设备详情</a>
            </div>
        </div>

        <div class="ui dropdown item displaynone scrolling">
            <span>视图展示</span>
            <i class="ion-arrow-graph-up-right icon"></i>
            <div class="menu">
                <div class="header">
                    视图展示
                </div>
            </div>
        </div>

        <div class="ui dropdown item displaynone scrolling">
            <span>告警展示</span>
            <i class="ion-paintbrush icon"></i>
            <div class="menu">
                <div class="header">
                    告警展示
                </div>
                <div class="ui divider"></div>
                <a class="item" href="error.html">告警日历</a>
                <a class="item" href="error.html">告警列表</a>
            </div>
        </div>

        <div class="ui dropdown item displaynone scrolling">
            <span>报表统计</span>
            <a href="error.html">
                <i class="ion-briefcase icon"></i>
            </a>
        </div>

        <div class="ui divider"></div>

    </div>

    <!--sidebar-->

    <div class="pusher">
        <!--navbar-->
        <div class="navslide navwrap" th:replace="layout::top_nav">
            <div class="ui menu icon borderless grid" data-color="inverted white">
                <a class="item labeled openbtn">
                    <i class="ion-navicon-round big icon"></i>
                </a>
                <div class="item ui colhidden">
                    <div class="ui icon input">
                        <input type="text" placeholder="Search...">
                        <i class="search icon"></i>
                    </div>
                </div>
                <div class="right menu colhidden">
                    <div class="ui dropdown item labeled icon">
                        <i class="bell icon"></i> 告警
                        <div class="ui red label mini circular">6</div>
                        <div class="menu">
                            <div class="header">
                                紧急告警
                            </div>
                            <div class="item">
                                告警信息1……
                                <div class="ui teal left pointing label">1</div>
                            </div>
                            <div class="item">
                                告警信息2……
                                <div class="ui label">51</div>
                            </div>
                            <div class="item">
                                告警信息3……
                                <div class="ui label">1</div>
                            </div>
                            <div class="header">
                                严重告警
                            </div>
                            <div class="item">
                                <i class="dropdown icon"></i>
                                <span class="text">更多</span>
                                <div class="menu">
                                    <div class="item">告警信息……</div>
                                    <div class="item">告警信息……</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ui dropdown item">
                        <img class="ui mini circular image" src="../static/images/0.jpg" th:src="@{images/0.jpg}"
                             alt="label-image"/>
                        <div class="menu">
                            <a class="item" href="#" th:text="${session.userInfo.name}">whstone</a>
                            <a class="item" href="#" th:href="@{/logout}">注销</a>
                        </div>
                    </div>
                    <a class="item labeled rightsidebar computer only">
                        <i class="ion-wrench large icon"></i>工具
                    </a>

                </div>
            </div>
        </div>
        <!--navbar-->
        <!--maincontent-->
        <div class="mainWrap navslide">
            <div class="ui equal width left aligned padded grid stackable">
                <!--Site Content-->
                <div class="sixteen wide column">
                    <div class="header item">
                        <h2><i class="large calendar icon"></i>告警日历</h2>
                    </div>
                    <div class="ui segment">
                        <!--<div class="ui secondary menu">-->
                        <div class="ui horizontal list buttons">
                            <div class="item">
                                <button id="num_filter_btn" class="ui basic button">问题数量</button>
                            </div>
                            <div class="item">
                                <div id="host_select_dropdown" class="ui selection dropdown">
                                    <input type="hidden" name="hosts">
                                    <i class="dropdown icon"></i>
                                    <div class="default text">选择设备</div>
                                    <div class="menu">
                                        <div id="select_host" class="item" data-value="host">设备</div>
                                        <div class="disabled item" data-value="platform">业务平台</div>
                                        <div id="select_all" class="item" data-value="all">所有</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div id="select_severity" class="ui selection dropdown">
                                    <input type="hidden" name="severity">
                                    <i class="dropdown icon"></i>
                                    <div class="default text">选择严重性</div>
                                    <div class="menu">
                                        <div class="yellow item" data-value="warning">警告</div>
                                        <div class="red item" data-value="high">严重</div>
                                        <div class="item" data-value="all">所有级别</div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div id="select_acknowledge" class="ui selection dropdown">
                                    <input type="hidden" name="acknowledge">
                                    <i class="dropdown icon"></i>
                                    <div class="default text">确认状态</div>
                                    <div class="menu">
                                        <div class="yellow item" data-value="1">已确认</div>
                                        <div class="red item" data-value="0">未确认</div>
                                        <div class="item" data-value="all">所有</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--<div class="sixteen wide column">-->
                        <div class="ui container">
                            <div id="calendarChart" class="chartBar"></div>
                            <div id="calendar-dimmer" class="ui inverted dimmer active">
                                <div class="ui text loader">正在加载</div>
                            </div>
                        </div>
                        <!--</div>-->
                        <!--</div>-->
                    </div>
                    <div class="ui segment block_row2">
                        <h3 id="table-title">当前问题</h3>
                        <table id="problems_table" class="ui compact very basic table center aligned " width="100%">
                        </table>
                        <div id="table-dimmer" class="ui inverted dimmer">
                            <div class="ui text loader">正在查询</div>
                        </div>
                    </div>
                </div>
                <!--modal end-->
                <!--Site Content-->
            </div>
        </div>
        <!--main content-->
    </div>
</div>
<div id="select_host_modal" class="ui tiny modal">
    <div class="ui content">
        <div id="host_tree"></div>
    </div>
    <div id="host_action" class="actions">
        <div class="ui button deny">取消</div>
        <div class="ui green button approve" id="host_submit">确认</div>
    </div>
</div>

<div id="pop_num_filter" class="ui custom popup bottom left transition">
    <input type="text" id="num_filter" name="num_filter" value=""/>
</div>

<div id="alert_popup"></div>
<div id="ack_popup"></div>

<!--事件详情modal框 -->
<div  th:replace="problemlist::problem_event_page"></div>
<!--确认事件modal框 -->
<div th:replace="problemlist::problem_acknowledge_page"></div>

<th:block th:replace="layout::bottom_script(~{::supple})">
    <script src="../static/js/js.cookie.js" th:src="@{js/js.cookie.js}"></script>
    <script src="../static/js/jquery.nicescroll.min.js" th:src="@{js/jquery.nicescroll.min.js}"></script>
    <script data-pace-options='{ "ajax": false }' src="../static/js/pace.js" th:src="@{js/pace.js}"></script>
    <script src="../static/js/main.js" th:src="@{js/main.js}"></script>
    <th:block th:fragment="supple">
        <script src="../static/js/jquery.dataTables.js" th:src="@{js/jquery.dataTables.js}"></script>
        <script src="../static/js/custom-datatable.js" th:src="@{js/custom-datatable.js}"></script>
        <script src="../static/js/assistantTool.js" th:src="@{js/assistantTool.js}"></script>
        <script src="../static/js/custom/choose-hosts.js" th:src="@{js/custom/choose-hosts.js}"></script>
        <script src="../static/js/custom/problem-common.js" th:src="@{js/custom/problem-common.js}"></script>
        <script src="../static/js/custom/problem-table.js" th:src="@{js/custom/problem-table.js}"></script>
        <script>

        </script>
        <script type="text/javascript">
            var send_data = {
                hostIds: [],
                problemNum: [],
                priority: "all",
                acknowledge: "all",
                date: ""
            }
            //获取日历图数据
            var calendar = initCalendar(send_data);
            var problemTable = $('#problems_table').problemTable();
            //            var problemTable = initProblemTable();

            //初始化 日历图
            function initCalendar(send_data) {
                var calendar = echarts.init(document.getElementById("calendarChart"));
                var option = {
                    backgroundColor: '#404a59',
                    title: {
                        top: 5,
                        text: '最近6个月的问题',
                        left: 'center',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    tooltip: {
                        formatter: function (params) {
                            return '日期：' + params.data[0] + "</br>" + '问题数：' + params.data[1]
                        }
                    },
                    legend: {
                        top: '15',
                        left: '100',
                        data: ['当前问题'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    calendar: [{

                        top: 60,
                        bottom: 20,
                        left: 'center',
                        range: ["2017-01-01", "2017-07-01"],
                        cellSize:[30,30],
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#000',
                                width: 4,
                                type: 'solid'
                            }
                        },
                        yearLabel: {
                            formatter: '{start}  1st',
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#323c48',
                                borderWidth: 1,
                                borderColor: '#111'
                            }
                        }
                    }],
                    series: [
                        {
                            name: '所有问题',
                            type: 'scatter',
                            coordinateSystem: 'calendar',
                            data: [],
                            symbolSize: function (val) {
                                return val[1] ;
                            },
                            itemStyle: {
                                normal: {
                                    color: '#ddb926'
                                }
                            }
                        },
                        {
                            name: '当前问题',
                            type: 'effectScatter',
                            coordinateSystem: 'calendar',
                            data: [],
                            symbolSize: function (val) {
                                return val[1] ;
                            },
                            showEffectOn: 'render',
                            rippleEffect: {
                                brushType: 'stroke'
                            },
                            hoverAnimation: true,
                            itemStyle: {
                                normal: {
                                    color: '#f4e925',
                                    shadowBlur: 10,
                                    shadowColor: '#333'
                                }
                            },
                            zlevel: 1
                        }
                    ]
                };
                calendar.setOption(option);
                //获取数据 完成日历图的渲染
                $.ajax({
                    type: "get",
                    url: "/calendar/get_graph",
                    data: send_data,
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (result) {
                        if (result.success) {
                            var data = result.data;
                            drawCalendar(calendar, data);
                        }
                        else {
                            errorMsg_no_data("日历图 Chart");
                        }
                    },
                    error: function () {
                        errorMsg_no_connect("日历图 Chart");
                    }
                });
                return calendar
            }
            //根据api范围的数据绘制日历图
            function drawCalendar(calendar, data) {
                calendar.setOption({
                    title: {
                        text: data.title
                    },
                    calendar: [{
                        range: data.range
                    }],
                    series: [
                        {
                            name: '所有问题',
                            type: 'scatter',
                            coordinateSystem: 'calendar',
                            data: data.data,
                            symbolSize: function (val) {
                                return val[1]/5;
                            },
                            itemStyle: {
                                normal: {
                                    color: '#ddb926'
                                }
                            }
                        },
                        {
                            data: getLightData(data.data),
                            name: '当前问题',
                            type: 'effectScatter',
                            coordinateSystem: 'calendar',
                            symbolSize: function (val) {
                                return val[1]/5;
                            },
                            showEffectOn: 'render',
                            rippleEffect: {
                                brushType: 'stroke'
                            },
                            hoverAnimation: true,
                            itemStyle: {
                                normal: {
                                    color: '#f46244',
                                    shadowBlur: 10,
                                    shadowColor: '#333'
                                }
                            },
                            zlevel: 1
                        }
                    ]
                })
                $('#calendar-dimmer').removeClass('active');

            }
            //点击每个节点，展示当天所有的问题列表
            calendar.on('click', function (params) {
//                    console.log(new Date(), params)
                var calendar = params.data;
                var date = calendar[0];
                showOneDayProblems(date);
            });

            //高亮显示当前存在的问题
            function getLightData(data) {
                var new_data = [];
                for (var i = 0; i < data.length; i++) {
                    if (data[i][2]) {
                        new_data.push(data[i]);
                    }
                }
                return new_data;
            }

            //一天的问题列表数据
            function showOneDayProblems(date) {
                send_data.date = date
                $('#table-dimmer').addClass('active')
                $.ajax({
                    type: "get",
                    url: "/calendar/get_list",
                    data: send_data,
                    dataType: "json",
                    contentType: 'application/json;charset=UTF-8',
                    success: function (result) {
                        if (result.success) {
                            var data = result.data;
                            problemTable.clear().rows.add(data).draw()
                            var year = date.substr(0, 4),
                                month = date.substr(5, 2),
                                day = date.substr(8, 2)
                            $('#table-title').html(year + '年' + month + '月' + day + '日 发生了' + data.length + '个问题')
                            $('#table-dimmer').removeClass('active')
                        }
                        else {
                            errorMsg_no_data("日历图一天 Chart");
                        }
                    },
                    error: function () {
                        errorMsg_no_connect("日历图一天 Chart");
                    }
                });
            }


            //发送筛选数据请求
            function filter_post() {
                $.ajax({
                    type: "get",
                    url: "/calendar/get_graph",
                    dataType: "json",
                    data: send_data,
                    contentType: 'application/json',
                    success: function (result) {
                        if (result.success) {
                            drawCalendar(calendar, result.data)
                        } else {
                            console.error(result.message)
                        }
                    },
                    error: function (e) {
                        console.error(e)
                    }
                }).done(function () {
                    $('#host_select_dropdown, #select_severity, #select_acknowledge').removeClass('loading disabled')
                })
            }
            $host_dropdown = $('#host_select_dropdown')
            $host_dropdown.dropdown({
                action: function (text, value) {
                    $host_dropdown.addClass('loading disabled')
                    if (value === 'host') {
                        var $host_tree = $('#host_tree')
                        $host_tree.genHostTree({
                            multi: true,
                            initHosts: send_data.hostIds,
                            finish: function () {
                                $('#select_host_modal').modal({
                                    onApprove: function () {
                                        send_data.hostIds = $host_tree.jstree(true).get_bottom_checked()
                                        //选择设备后，执行的操作
                                        filter_post();
                                    },
                                    onHidden: function () {
                                        $('#host_select_dropdown').removeClass('loading disabled').dropdown('set text', "已选择" + send_data.hostIds.length + "个设备")
                                    }
                                }).modal('show')
                            }
                        })
                        // 下面的使用方法以废弃
                        /*genHostsTree($host_tree, send_data.hostIds, function () {
                         $('#select_host_modal').modal({
                         onApprove: function () {
                         send_data.hostIds = $host_tree.jstree(true).get_bottom_checked()
                         //选择设备后，执行的操作
                         filter_post();
                         },
                         onHidden: function () {
                         $('#host_select_dropdown').removeClass('loading disabled').dropdown('set text', "已选择" + send_data.hostIds.length + "个设备")
                         }
                         }).modal('show')
                         })*/
                        $('#host_select_dropdown').dropdown('set text', "正在选择设备")
                    } else if (value === 'all') {
                        send_data.hostIds = []
                        filter_post()
                        $('#host_select_dropdown').dropdown('set text', "所有设备").dropdown('hide')
                        $host_dropdown.removeClass('loading disabled')
                    }
                }
            })


            //问题数量筛选按钮
            $('#num_filter_btn').popup({
                popup: $('#pop_num_filter'),
                on: 'click'
            })

            //问题数量选择条
            $("#num_filter").ionRangeSlider({
                type: "double",
                min: 1,
                max: 20,
                from: 1,
                //TODO 最好使用返回的问题数中的最大值
                to: 20,
                step: 1,
                onStart: function (data) {

                },
                onChange: function (data) {

                },
                onFinish: function (data) {
                    send_data.problemNum = [data.from, data.to]

                    filter_post()
                },
                onUpdate: function (data) {

                }
            });
            $('#select_severity').dropdown({
                onChange: function (value) {
                    $('#select_severity').addClass('loading disabled')
                    send_data.priority = value
                    filter_post()
                }
            })
            $('#select_acknowledge').dropdown({
                onChange: function (value) {
                    $('#select_acknowledge').addClass('loading disabled')
                    send_data.acknowledge = value
                    filter_post()
                }
            })
        </script>
    </th:block>
</th:block>
</body>
</html>